<!-- 心电AI预警 -->
<template>
  <border noMore noborder cardTitle="心电AI预警">
    <div class="info">
      <Chart :optionData="option_column" style="height: 100%"></Chart>
    </div>
  </border>
</template>

<script>
import border from "./border.vue";
import StatisticsMixins from "../StatisticsMixins";
export default {
  name: "GlycemicCount",
  mixins: [StatisticsMixins],
  components: { border },
  data () {
    return {
      option_column: {
        // 自定义显示内容
        tooltip: {
          trigger: "axis"
          // formatter: function (params) {
          //   let result = "";
          //   params.forEach(function (item) {
          //     const dotHtml = '<span style="display:inline-block;border-radius:10px;height:30px;"></span>';
          //     result += `<span style="font-size: 12px; font-weight: 400; color: #7E848A;">新增用信金额</span>: <span style="font-size: 16px; font-weight: bold; color: #06706C;">${priceFormat(
          //       item.data,
          //       2
          //     )}</span>万`;
          //   });
          //   return result;
          // }
        },
        grid: {
          top: "40",
          left: "3%",
          right: "3%",
          bottom: "0",
          containLabel: true
        },
        legend: {
          itemGap: 40,
          data: [
            {
              name: "房颤",
              icon: "image://"
            },
            {
              name: "卒中",
              icon: "image://"
            }
          ],
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
          itemWidth: 30,
          itemHeight: 12
        },
        xAxis: {
          type: "category",
          data: ["1日", "2日", "3日", "4日"],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#fff"
          },
          boundaryGap: false
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(157, 175, 214, .3)"
            }
          },
          lineStyle: {
            type: "dashed",
            color: "rgba(157, 175, 214, .3)"
          },
          axisLabel: {
            color: "#fff"
          }
        },

        series: [
          {
            name: "房颤",
            data: [1, 20, 30, 40],
            type: "line",
            smooth: true,
            symbol: "none", // 不显示点
            lineStyle: {
              color: "#ECA850",
              width: 2
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(236, 168, 80, 0.3)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(236, 168, 80, 0)" // 100% 处的颜色
                  }
                ],
                global: false
              }
            }
          },
          {
            name: "卒中",
            data: [10, 15, 25, 35], // 第二条折线数据
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: "#33CCCC",
              width: 2
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(24, 138, 138, 0.8)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(5, 40, 60, 0.22)" // 100% 处的颜色
                  }
                ],
                global: false
              }
            }
          }
        ]
      }
    };
  }
};
</script>

<style scoped>
.info {
  font-size: 0.18rem;
  padding: 0.15rem 0rem 0.1rem;
  height: 100%;
}
</style>
